import React from "react";
import CustomButton from "./CustomButton";

const FilePicker = ({file,setFile,readFile}) =>{
    return(
        <div className="filepicker-container">
            <div className="flex-1 flex flex-col">
                <input type="file"
                id="file-upload"
                accept="image/*"
                // 选择第一个图片
                onChange={(e) => setFile(e.target.files[0])} />
                <label htmlFor="file-upload" className="filepicker-label">
                    Upload File


                </label>
                <p className="mt-2 text-gray-500 text-xs truncate">
                    {file === ''?"您没选取文件呀~":file.name}
                </p>
            </div>
            <div className="mt-4 flex flex-wrap gap-3">
                <CustomButton 
                type="online"
                title="Logo"
                handleClick={() => readFile('logo')}
                customStyles="text-xs"
                
                />
                                <CustomButton 
                type="filled"
                title="Full"
                handleClick={() => readFile('full')}
                customStyles="text-xs"
                
                />
            </div>
        </div>
    )
}

export default FilePicker;